var LodgerCnt = 1;
var lodgerList = ['保留位'];

function Lodger( _lodgerName, _certificate, 
		_certificateNo, _sex, _phone ){
	this.lodgerName = _lodgerName;
	this.certificate = _certificate;
	this.certificateNo = _certificateNo;
	this.sex = _sex;
	this.phone = _phone;
	this.isRegister = "0";	
	this.toJson = function(){
		var flds = ['lodgerName','certificate','certificateNo',
		            'sex', 'phone','isRegister' ];
		var json = "{";		
		for( var key of flds ){
			json += this.makeProStr( key ) +",";
		}
		json = json.substring(0,json.length-1);
		json += "}";
		return json;
	}	
	this.makeProStr = function( fldName ){
		return "\""+ fldName +"\":\""+ this[fldName] +"\"";
	}	
}



function updateLodger(){
	var lodgerName, certificate, certificateNo, sex, phone;
	//{1} 从一开始。
	for(var i=1; i<=LodgerCnt; i++){
		lodgerName = getE("lodgerName"+ i);
		//console.log( "{addLodger.js} updateLodger: i=[%d], lodgerName=[%s]",
		//			  i, lodgerName.value );
		certificate = getE("certificate"+ i);
		certificateNo = getE("certificateNo"+ i);
		sex = getE("sex"+ i);
		phone = getE("phone"+ i);

		lodgerList[i] = new Lodger( lodgerName.value, 
							certificate.value, 
							certificateNo.value, 
							sex.value, phone.value );
		
		//console.log("{addLodger.js} lodgerList["+ i +"]");
		//console.log( lodgerList[i] );

		if( i==1 ){
			lodgerList[i].isRegister = 1;
		}
	}
}

function getE( id ){
	return document.getElementById( id );
}

function addLodger(){
	//{1} 更新 lodgerList 数组。
	updateLodger();
	//{2} 重造表格: #tblBody。
	rebuildTable();
	
	LodgerCnt ++;
	//{3} 追加一个空行。
	var newLodger = new Lodger("", "", "", "", "");	
	var TD = makeRow(LodgerCnt,newLodger,"hidden");
	$("#tblBody").append( TD );
	$("#tr"+LodgerCnt).show("slow");
}

function rebuildTable(){
	var body = $("#tblBody");
	var html = "";
	for(var i=2; i<=LodgerCnt; i++){		
		html += makeRow( i, lodgerList[i] );
	}
	body.html( html );
}

/* http://localhost:8080/images/common/cancel.png */
var cancelPng = WEB_ROOT +"/images/common/cancel.png";
function makeRow( cnt, lodger, _hidden ){	
	//console.log("{1} lodger: "+ lodger);
	
	var _H = "";
	if( _hidden ){
		_H = " style=\"display:none;\"";
	}	
	var html = "<tr id=\"tr"+ cnt +"\""+_H+">\r\n";
	html += makeTD( cnt );	
	html += makeINPUT("lodgerName"+ cnt, lodger.lodgerName);
	html += makeINPUT("certificateNo"+ cnt, lodger.certificateNo);
	html += makeSex( "sex"+ cnt, lodger.sex );
	
	html += "<td>\r\n"+
			"<img src=\""+ cancelPng + "\" onclick=\"delLodger("+ cnt +")\"/>\r\n"+
			"<input type=\"hidden\" id=\"certificate"+ 
				cnt +"\" value=\"1\" />\r\n"+
			"<input type=\"hidden\" id=\"phone"+ cnt +"\" />\r\n"+
			"</td>\r\n";

	html += "</tr>\r\n";
	//console.log( html );
	return html;
}

function delLodger( index ){
	console.log( "{DEBUG} index:"+ index );
	updateLodger();
	//{1} 删除第 index 号元素。
	lodgerList.splice( index, 1 );
	console.log( lodgerList );
	//{2} 一定要先减, 否则重造表格数组越界。
	LodgerCnt --;
	//{3} 重造表格: #tblBody
	rebuildTable();
	
}

function makeTD( text ){
	var td = "";
	td += "<td class=\"blk_td\">\r\n";
	td += text +"\r\n"
	td += "</td>\r\n";
	return td;
}

function makeINPUT( id, val ){
	var td = "";
	td += "<td class=\"blk_td\">\r\n";
	td += "<input class=\"blank\" type=\"text\" id=\""+ id +
		  "\" value=\""+ val +"\" onfocus=\"setBack(this);\" />\r\n"
	td += "</td>\r\n";
	return td;
}

var sexOpts = [
	{text:'请选择性别',val:'0'},
	{text:'男',val:'男'},
	{text:'女',val:'女'}
];

function makeSex( _id, _val ){
	var td = "<td class=\"blk_td\">\r\n";
	td += "<select id=\""+ _id +"\">\r\n";
	for(var obj of sexOpts){
		var sel = (obj['val']==_val) 
		          ? ' selected' : '';	
		td += "<option value=\""+ obj['val'] +
		      "\""+ sel +">"+ obj['text']+ 
			  "</option>\r\n";
	}
	td += "</select>\r\n";
	td += "</td>\r\n";
	return td;
}


var lastTD = undefined;
function setBack( obj ){
	//console.log("setBack: "+ obj.name );
	var par = $( obj ).parent();
	if( lastTD ){
		lastTD.css("background","white");
	}
	par.css("background","blue");
	lastTD = par;
}


